<template>
  <div>
    <nav-bar title="消息"></nav-bar>
    <div class="home maxinBox" v-if="user.userType === '04'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
        </div>
      </div>
    </div>
    <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '1'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
          <p>您的入场申请已提交，请耐心等待审核通过...</p>
        </div>
      </div>
    </div>
    <div class="home maxinBox" v-else-if="user.userType === '02' && user.userStatus === '3'">
      <div class="backgroundfff" style="margin: 0 auto;height: 47vh;padding: 6.25rem 0;">
        <div class="center">
          <img src="../../assets/images/null.png" alt="">
          <p>{{localStorage.getItem('exitReason')}}</p>
        </div>
      </div>
    </div>
    <div class="message maxinBox" v-else>
      <van-tabs type="card" v-model="active">
        <van-tab title="我的待办" :badge="numTodo ? numTodo : false">
          <div style="background-color: #fff;">
            <card v-if="fixedList.cardDesc" :data="fixedList" cardType="message" @click.native="messageDetails(fixedList, active, 1)"></card>
            <card v-if="abnormalList.cardDesc" :data="abnormalList" cardType="message" @click.native="messageDetails(abnormalList, active, 2)"></card>
            <card v-if="rectificationList.cardDesc" :data="rectificationList" cardType="message" @click.native="messageDetails(rectificationList, active, 3)"></card>
            <card v-if="cList.cardDesc" :data="cList" cardType="message" @click.native="messageDetails(cList, active, 4)"></card>
            <card v-if="visitorList.cardDesc" :data="visitorList" cardType="message" @click.native="messageDetails(visitorList, active, 5)"></card>
            <card v-if="examinationList.cardDesc" :data="examinationList" cardType="message" @click.native="messageDetails(examinationList, active, 16)"></card>
            <card v-if="hotCardList.cardDesc" :data="hotCardList" cardType="message" @click.native="messageDetails(hotCardList, active, 15)"></card>
          </div>
        </van-tab>
        <!-- <card :data="attendance" cardType="message" @click.native="messageDetails(attendance, active, 6)"></card> -->
       <!-- <van-tab title="通知消息" :dot="isDotWarn">
          <div style="background-color: #fff;">
            <card v-if="warnList.cardDesc" :data="warnList" cardType="message" @click.native="messageDetails(warnList, active, 7)"></card>
          </div>
        </van-tab> -->
        <van-tab title="个人考勤" :dot="attendanceDot ? true : false">
          <div style="background-color: #fff;">
            <card v-if="illegalList.cardDesc" :data="illegalList" cardType="message" @click.native="messageDetails(illegalList, active, 8)"></card>
            <card v-if="exitList.cardDesc" :data="exitList" cardType="message" @click.native="messageDetails(exitList, active, 9)"></card>
            <!-- <card v-if="attendanceList.cardDesc" :data="attendanceList" cardType="message" @click.native="messageDetails(attendanceList, active, 11)"></card> -->
            <!-- <card v-if="signInList.cardDesc" :data="signInList" cardType="message" @click.native="messageDetails(signInList, active, 12)"></card> -->
            <!-- <card v-if="signRemindList.cardDesc" :data="signRemindList" cardType="message" @click.native="messageDetails(signRemindList, active, 13)"></card> -->
            <!-- <card v-if="processInformList.cardDesc" :data="processInformList" cardType="message" @click.native="messageDetails(processInformList, active, 14)"></card> -->
            <!-- <card :data="otherRemindData" cardType="message" @click.native="messageDetails(item)"></card> -->
            <card v-if="examinationDataList.cardDesc" :data="examinationDataList" cardType="message" @click.native="messageDetails(examinationDataList, active, 11)"></card>
            <card v-if="hotCardDataList.cardDesc" :data="hotCardDataList" cardType="message" @click.native="messageDetails(hotCardDataList, active, 10)"></card>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import messageAPI from '../../api/messageAPI.js'
  import fixedInspectionAPI from '../../api/workAPI/fixedInspectionAPI.js'
  import realTimeInspectionAPI from '../../api/workAPI/realTimeInspectionAPI.js'
  import overtimePayManage from '../../api/workAPI/overtimePayManage.js'
  import hotCardManageAPI from '../../api/workAPI/hotCardManageAPI.js'
  import Card from './components/Card.vue'
  export default {
    components: {
      Card
    },
    data() {
      return {
        allnum: 0,
        num: 0,
        isDotWarn: false,
        isDotAttendance: false,
        user: {
          userStatus: '',
          userType: '',
        },
        active: 0,
        keyWord: '',
        examinationList: {
          cardNum: 0,
          cardTitle: '加班审批',
          cardImg: require('../../assets/message/message8.png'),
          cardDesc: '',
        },
        hotCardList: {
          cardNum: 0,
          cardTitle: '动火证审批',
          cardImg: require('../../assets/message/message8.png'),
          cardDesc: '',
        },
        fixedList: {
          cardNum: 0,
          cardTitle: '固定巡检任务',
          cardImg: require('../../assets/message/message8.png'),
          cardDesc: '',
        },
        abnormalList: {
          cardNum: 0,
          cardTitle: '点位异常整改',
          cardImg: require('../../assets/message/message9.png'),
          cardDesc: '',
        },
        rectificationList: {
          cardNum: 0,
          cardTitle: '安全整改任务',
          cardImg: require('../../assets/message/message1.png'),
          cardDesc: '',
        },
        cList: {
          cardNum: 0,
          cardTitle: '抄送消息通知',
          cardImg: require('../../assets/message/message2.png'),
          cardDesc: '',
        },
        visitorList: {
          cardNum: 0,
          cardTitle: '访客审批',
          cardImg: require('../../assets/message/message.png'),
          cardDesc: '',
        },
        attendance: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '设备故障信息',
          cardImg: require('../../assets/message/message6.png'),
          cardDesc: '',
        },
        warnList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '环境预警信息',
          cardImg: require('../../assets/message/message7.png'),
          cardDesc: '',
        },
        illegalList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '违章提醒',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '',
        },
        exitList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '退场提醒',
          cardImg: require('../../assets/message/message3.png'),
          cardDesc: '',
        },
        otherRemindData: {
          cardHot: 0,
          timeLimit: '2020-05-21  12:12:12',
          cardTitle: '其他消息',
          cardImg: require('../../assets/message/message4.png'),
          cardDesc: 'III级 xxx位置/部件 12:00:00 之前需要…',
        },
        attendanceList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '出勤异常',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '出勤异常',
        },
        signInList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '签到异常',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '签到异常',
        },
        signRemindList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '签到提醒',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '签到提醒',
        },
        // processInformList: {
        //   cardHot: 0,
        //   timeLimit: '',
        //   cardTitle: '流程通知',
        //   cardImg: require('../../assets/message/message5.png'),
        //   cardDesc: '流程通知',
        // },
        examinationDataList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '加班通知',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '',
        },
        hotCardDataList: {
          cardHot: 0,
          timeLimit: '',
          cardTitle: '动火证通知',
          cardImg: require('../../assets/message/message5.png'),
          cardDesc: '',
        }
      }
    },
    computed: {
      numTodo: function() {
        return parseInt(this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum)
      },
      attendanceDot: function() {
        return this.exitList.cardHot + this.illegalList.cardHot
      }
    },
    methods: {
      // 加班管理
      getWorkOvertimeDataList() {
        overtimePayManage.getWorkOvertimeDataList(1).then(res => {
          if (res.length) {
            this.examinationList.cardNum = res.length
            this.examinationList.cardDesc = `${res[0].applyName}于${res[0].applyDate}申请加班,请前往处理`
            this.allnum =  this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + 0 + this.fixedList.cardNum + 0 + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 动火证管理
      getHotCardDataList() {
        hotCardManageAPI.getHotCardDataList(1).then(res => {
          if (res.length) {
            this.hotCardList.cardNum = res.length
            this.hotCardList.cardDesc = `${res[0].applicant}于${res[0].applyDate}申请动火证,请前往处理`
            this.allnum =  this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = 0 + this.examinationList.cardNum + this.fixedList.cardNum + 0 + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 固定巡检任务
      getTaskList() {
        let data = {
          projectId: localStorage.getItem('projectId'),
          completed: 0
        }
        fixedInspectionAPI.getTaskList(data).then(res => {
          if (res.length){
            this.fixedList.cardNum = res.length
            this.fixedList.cardDesc = `请于${res[0].execStartTime} 前进行巡更`
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + 0 + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 点位异常整改
      getTaskAboutMyList() {
        let data = {
          completed: 0,
          projectId: localStorage.getItem('projectId'),
          dutyType: 1
        }
        fixedInspectionAPI.getTaskAboutMyList(data).then(res => {
          if (res.length) {
            this.abnormalList.cardNum = res.length
            this.abnormalList.cardDesc = `请于${res[0].execStartTime} 前进行巡更`
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + 0 + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 实时检整改任务
      getRealTimeList () {
        let data = {
          reformStatus: 1,
          projectId: localStorage.getItem('projectId'),
          dutyType: 1
        }
        realTimeInspectionAPI.getAboutMy(data).then(res => {
          if (res.length) {
            this.rectificationList.cardNum = res.length
            this.rectificationList.cardDesc = `请于${res[0].expireDate} 前进行巡更`
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + 0 + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 抄送消息
      getCcList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 4).then(res => {
          if (res.ccList) {
            this.cList.cardDesc = res.ccList[0].messageContent
            this.cList.cardNum = res.ccList.filter(item => {
              return !item.readFlag
            }).length
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + 0 + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 访客消息
      getVisitorList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 5).then(res => {
          if(res.visitorList) {
            this.visitorList.cardNum = res.visitorList.filter(item => {
              return !item.readFlag
            }).length
            this.visitorList.cardDesc = res.visitorList[0].messageContent
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + 0 + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 预警消息
      getWarnList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 7).then(res => {
          if (res.envWarning) {
            this.warnList.timeLimit = res.envWarning[0].createTime
            this.warnList.cardHot = res.envWarning.filter(item => {
              return !item.readFlag

            }).length
            if (this.warnList.cardHot) {
              this.isDotWarn = true
            }
            else {
              this.isDotWarn = false
            }
            this.warnList.cardDesc = res.envWarning[0].messageContent
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + 0
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 违章消息
      getIllegalList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 8).then(res => {
          if (res.illegal) {
            this.illegalList.timeLimit = res.illegal[0].createTime
            this.illegalList.cardHot = res.illegal.filter(item => {
              return !item.readFlag
            }).length
            this.illegalList.cardDesc = res.illegal[0].messageContent
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + 0 + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 退场消息
      getExitList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 9).then(res => {
          if (res.bowOut) {
            this.exitList.timeLimit = res.bowOut[0].createTime
            this.exitList.cardHot = res.bowOut.filter(item => {
              return !item.readFlag
            }).length
            this.exitList.cardDesc = res.bowOut[0].messageContent
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + 0 + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 加班消息
      getWorkOvertimeList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 11).then(res => {
          if (res.bowOut) {
            this.examinationDataList.timeLimit = res.overTimeList[0].createTime
            this.examinationDataList.cardHot = res.overTimeList.filter(item => {
              return !item.readFlag
            }).length
            this.examinationDataList.cardDesc = res.overTimeList[0].messageContent
            this.allnum = this.hotCardDataList.cardHot + this.examinationDataList.cardHot + this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.hotCardDataList.cardHot + this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + 0 + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 动火证消息
      getHotCardList() {
        let projectId = localStorage.getItem('projectId')
        messageAPI.getMessagelist(projectId, '', 10).then(res => {
          if (res.hotCardList) {
            this.hotCardDataList.timeLimit = res.hotCardList[0].createTime
            this.hotCardDataList.cardHot = res.hotCardList.filter(item => {
              return !item.readFlag
            }).length
            this.hotCardDataList.cardDesc = res.hotCardList[0].messageContent
            this.allnum = this.examinationDataList.cardHot + this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + this.exitList.cardHot + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          } else {
            this.allnum = this.examinationDataList.cardHot + this.hotCardList.cardNum + this.examinationList.cardNum + this.fixedList.cardNum + this.abnormalList.cardNum + this.rectificationList.cardNum + this.cList.cardNum + this.visitorList.cardNum + 0 + this.illegalList.cardHot + this.warnList.cardHot
            this.$store.commit('changeNum', this.allnum)
          }
        })
      },
      // 查询各类消息列表
      messageDetails(itemData, index, active) {
        let messageDetails = {
          index: index,
          itemData: itemData,
          active: active
        }
        localStorage.setItem('messageDetails', JSON.stringify(messageDetails))
        this.$router.push({
          name: 'MessageDetails'
        })
      }
    },
    mounted() {
      if (this.$route.params.type) {
        this.active = this.$route.params.type
      }
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
      this.getRealTimeList()
      this.getTaskAboutMyList()
      this.getTaskList()
      this.getCcList()
      this.getVisitorList()
      this.getWarnList()
      this.getIllegalList()
      this.getExitList()
      this.getWorkOvertimeList()
      this.getHotCardList()

      if (this.user && this.user.userType === '01') {
        this.getWorkOvertimeDataList()
        this.getHotCardDataList()
      }
    }
  }
</script>

<style scoped lang="scss">
  /deep/ .van-info{
    top: 0.625rem;
    right: -0.5rem;
  }
  .message{
    margin-bottom: 10 * $spacing;
    &Title{
      margin-top: 0.9375rem;
      padding: 0 0.9375rem;
      position: relative;
      font-size: (3 / 4) * $fontSize;
      font-weight: $fontWeight;
        .num{
          font-size: $fontSize;
          position: absolute;
          top: -0.3125rem;
          width: 4 * $spacing;
          height: 4 * $spacing;
          text-align: center;
          line-height: 4 * $spacing;
          color: $color;
          background-color: #f00;
          border-radius: 50%;
        }
      h4{
        margin: 0;
      }
    }
    /deep/ .van-tabs__wrap{
      height: 2.75rem;
      line-height: 2.75rem;
      .van-tabs__nav--card{
        border: inherit;
        margin: inherit;
        .van-tab.van-tab--active{
          background-color: #fff;
          color: #1577FF;
        }
        .van-tab{
          border: inherit;
          height: 2.75rem;
          line-height: 2.75rem;
          color: #999;
          background-color: #EBEBEB;;
        }
      }
    }
  }

</style>
